<template>
	<view class="MallTypeMenu">
		<view class="type-item" v-for="(item,index) in typeItem" :key="index" @click="typeItemClick(item,index)">
			<image :src="item.img" mode="widthFix" v-if="index !== currentIndex"></image>
			<image :src="item.clickImg" mode="widthFix" v-else></image>
			<view class="type-item-text" :class="{'textShow': index == currentIndex }">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				typeItem: [
					{img:require("../../../static/images/icons_09.png"),text: "推荐",clickImg:require("../../../static/images/icons_21.png")},
					{img:require("../../../static/images/icons_05.png"),text:"拿铁",clickImg:require("../../../static/images/icons_19.png")},
					{img:require("../../../static/images/icons_03.png"),text:"咖啡",clickImg:require("../../../static/images/icons_18.png")},
					{img:require("../../../static/images/icons_07.png"),text:"瑞纳冰",clickImg:require("../../../static/images/icons_20.png")},
					{img:require("../../../static/images/icons_11.png"),text:"水果茶",clickImg:require("../../../static/images/icons_22.png")}	
				],
				currentIndex:0,
			}
		},
		methods:{
			typeItemClick(item,index){
				this.currentIndex = index
				this.$emit("mallShow",item.text)
			}
		}
	}
</script>

<style scoped>
	.MallTypeMenu{
		position: sticky;
		display: flex;
		height: 140rpx;
		margin-top: 20rpx;
		overflow-x: scroll;
	}
	.type-item{
		width: 180rpx;
		height: 100%;
		text-align: center;
		flex-shrink: 0;
	}
	.type-item>image{
		width: 50%;
	}
	.textShow{
		color: #0c34ba;
	}
	.type-item-text{
		color: black;
		font-size: 20rpx;
	}
</style>
